<template>
  <div>
    <p>主页</p>
    <div class="three_box"></div>
  </div>
</template>
    
<script setup>
import { h, nextTick } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
nextTick(() => {
  const scene = new THREE.Scene();
  const Dom = document.querySelector(".three_box");
  const width = Dom.offsetWidth;
  const height = Dom.offsetHeight;
  const camera = new THREE.PerspectiveCamera(40, width / height, 0.1, 3000);
  const renderer = new THREE.WebGLRenderer();
  const xyz = new THREE.AxesHelper(100);
  scene.add(xyz);
  const amLight = new THREE.AmbientLight(0xffffff, 1.0);
  const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);
  dirLight.position.set(200, 200, 200);
  scene.add(amLight);
  scene.add(dirLight);
});
</script>
    
<style scoped>
.three_box {
  position: relative;
  width: 80vw;
  height: 80vh;
}
</style>